function createParticle() {
    const particle = document.createElement('div');
    particle.className = 'particle';
    
    // 随机大小
    const size = Math.random() * 5 + 2;
    particle.style.width = `${size}px`;
    particle.style.height = `${size}px`;
    
    // 随机位置
    particle.style.left = `${Math.random() * 100}%`;
    particle.style.top = '100%';
    
    // 随机动画时长
    const duration = Math.random() * 10 + 5;
    particle.style.animation = `float-particle ${duration}s infinite linear`;
    
    document.querySelector('.particles').appendChild(particle);
    
    // 动画结束后移除粒子
    setTimeout(() => {
        particle.remove();
    }, duration * 1000);
}

// 定期创建新粒子
setInterval(createParticle, 300);

// 添加按钮波纹效果
document.querySelector('button').addEventListener('click', function(e) {
    const ripple = document.createElement('span');
    ripple.className = 'ripple';
    
    const rect = this.getBoundingClientRect();
    const size = Math.max(rect.width, rect.height);
    
    ripple.style.width = ripple.style.height = `${size}px`;
    ripple.style.left = `${e.clientX - rect.left - size/2}px`;
    ripple.style.top = `${e.clientY - rect.top - size/2}px`;
    
    this.appendChild(ripple);
    
    setTimeout(() => ripple.remove(), 600);
}); 